<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#scene{width:640px;height:480px;border:5px solid black;margin:30px auto;position:relative;}
#scene img {margin:10px;cursor: pointer;}
</style>
<script type="text/javascript" src="js/jquery-1.6_min.js"></script>
<script type="text/javascript">
var image = ['hand.jpg','stone.jpg','jiandao.jpg'];
var coverimg = 'cover.jpg';
var picarr = [];
var TOTALPIC = 6;
var IMAGE_WIDTH = 120;
var IMAGE_HEIGHT = 160;

$(function(){
	//组合图片
	i=0;
	while( i < TOTALPIC )
	{
		for ( j=0;j<image.length ;j++ )
		{
			picarr[i++] = image[j];
			if(i>=TOTALPIC)
				break;
		}
	}
	//打乱数组
	var newpicarr = [];
	for(i=0;i<TOTALPIC;i++)
	{
		k = parseInt(Math.random()*(TOTALPIC-i));
		newpicarr[i] = picarr[k];
		picarr.splice(k,1);
	}

	for ( i=0;i<newpicarr.length ;i++ )
	{
		$('<img></img>').attr({
				'src':'images/'+coverimg ,
				'id' : 'pic'+(i+1),
				'width': IMAGE_WIDTH + 'px',
				'height': IMAGE_HEIGHT + 'px',
				'pic'	: i,
				'isshow': "0"
			}).appendTo('#scene');
	}

	var pic_selected = 0;
	var s1=s2=-1;
	var t = TOTALPIC;
	$('#scene img').click(function(){
		if( $(this).attr('isshow') == "0" )
		{

			if( pic_selected >= 2 )
			{
				$('#scene img').attr('src','images/'+coverimg);
				$('#scene img').attr('isshow','0');
				pic_selected = 0;
				s1=s2=-1;
			}
			pic_selected++;
			$(this).attr('src','images/'+newpicarr[$(this).attr('pic')]);
			$(this).attr('isshow', '1');

			switch(pic_selected)
			{
				case 1: s1 = $(this).attr('pic');break;
				case 2: s2 = $(this).attr('pic');break;
			}

			//$('#debug').html( s1 + "," + s2 + "<br />" + newpicarr[s1] + "," + newpicarr[s2]);
			//$('#debug').html( newpicarr[s1] + "," + newpicarr[s2]);

			if( s1!=-1 && s2!=-1 && newpicarr[s1] == newpicarr[s2] )
			{
				$('#scene img').eq(s1).css("display","none");
				$('#scene img').eq(s2).css("display","none");
				t = t-2
			}

			if( t == 0)
			{
				alert("恭喜你!!!!");
			}
			//$('#debug').html($('#scene img').length);
		}
	})
});


</script>

</head>
<body>
<div id="scene">
</div>

<div id="debug"></div>
</body>
</html>
